<template>
	<view class="content mainpadding" v-if="pageShow">
		<view class="flexleft paddinglr15" >
			<view class="text_j color_san margin_right2" v-show="orderInfo.status==0">待接單</view>
			<view class="text_j color_san margin_right2" v-show="orderInfo.status==1">待服務</view>
			<view class="text_j color_san margin_right2" v-show="orderInfo.status==3">待完成</view>
			<view class="text_j color_san margin_right2" v-show="orderInfo.status==87">付定金</view>
			<view class="text_j color_san margin_right2" v-show="orderInfo.status==5">待完成</view>
			<view class="text_j color_san margin_right2" v-show="orderInfo.status==4">付尾款</view>
			<view class="text_j color_san margin_right2" v-show="orderInfo.status==88">已取消</view>
			<view class="text_j color_san margin_right2" v-show="orderInfo.status==99">已完成</view>
			<u-icon name="arrow-right" color="#999" size="16"></u-icon>
		</view>
		<!-- 地址 -->
		<view class="margin_top border ffffff mainpadding">
			<view class="flexleft">
				<view class="text_w color_san margin_right3">{{orderInfo.name}}</view>
				<view class="text_w color_san">{{orderInfo.phone}}</view>
			</view>
			<view class="text_five color_six margin_top" v-if="orderInfo.address">{{orderInfo.address}}</view>
			<!-- <view class="text_five color_six margin_top">{{orderInfo.sheng}}{{orderInfo.shi}}{{orderInfo.qu}}{{orderInfo.useraddre}}</view> -->
		</view>
		<!-- 商品 -->
		<view class="margin_top border2 ffffff mainpadding">
			<view class="flexbetween">
				<view class="flexleft" @click="goShopInfo(orderInfo.shop_id)">
					<image class="shopImg margin_right1" src="/static/images/order/shop.png" mode=""></image>
					<view class="text_x color_ling margin_right1 xiankuan">{{orderInfo.shop_data.name}}</view>
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
				<view class="contactShop"  @click="phone(orderInfo.shop_data.shopmbl)">打電話</view>
			</view>
			<!-- 对接接口时判断是否加上 padding_bottom line_bottom -->
			<view class="flexleft margin_top padding_bottom line_bottom dingwei" v-for="item in orderInfo.goods_data" :key="item.id">
				<view class="goodsImg margin_right3">
					<image :src="item.logoimage" mode=""></image>
					<view class="shipment" v-show="item.is_sell==1">已出貨</view>
				</view>
				<!-- <view class="saleLableclass" v-if="item.salename">{{item.salename}}</view> -->
				<view class="flex1 justify_between_column" style="height: 200rpx;">
					<view class="text_a color_san bold" v-if="item.salename">【{{item.salename}}】</view>
					<view class="text_a color_san bold">{{item.goods_name}}</view>
					<view class="xiaohui margin_top1 flexbetween" v-if="item.wei || item.hei">
						<text>尺寸：{{item.wei}}*{{item.hei}}</text>
						<text>用量：{{item.formulacount}}{{item.size}}</text>
					</view>
					<view class="xiaolan" v-if="item.spunatdata_text && item.spunatdata_text.length">規格：<text class="margin_right1"
							v-for="(value) in item.spunatdata_text"
							:key="value.spunatid">{{value.spunatname}}*{{value.num}}&nbsp;&nbsp;&nbsp;</text>
					</view>
					<view class="flexbetween margin_top1">
						<template v-if="orderInfo.status!=99 && orderInfo.status!=4">
							<view class="price">x{{item.num}}</view>
						</template>
						<template v-if="orderInfo.status==99 || orderInfo.status==4">
							<view class="price">${{item.d_price}}&nbsp;&nbsp;&nbsp;x{{item.num}}</view>
							<view class="text_six color_orange">${{item.price}}</view>
						</template>
					</view>
				</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="hei_text main_size bold">商品金額</view>
				<view class="text_x color_red">${{orderInfo.goods_money || 0}}</view>
			</view>
			<view class="flexbetween margin_top1">
				<view class="hei_text main_size bold">税金</view>
				<view class="text_a color_orange">${{orderInfo.s_money}}</view>
			</view>
			<view v-if="orderInfo.payinfo.length">
				<view v-for="item in orderInfo.payinfo" :key="item.id">
					<view class="flexbetween margin_top1"  v-if="item.paytype!=0">
						<view class="hei_text main_size bold">{{returnzftext(item.paytype)}} <text v-if="item.payprice_type!=1">({{item.payprice_type==2?'訂金':'尾款'}})</text> </view>
						<view class="huang_text main_size bold">-${{item.pay_price}}</view>
					</view>
				</view>
				<!-- <template v-if="orderInfo.paytype==6 || orderInfo.paytype==7">
					<view class="flexbetween margin_top">
						<view class="hei_text main_size bold">街口券折抵 </view>
						<view class="hui_text main_size bold">${{orderInfo.RedeemAmount}}</view>
					</view>
					<view class="flexbetween margin_top">
						<view class="hei_text main_size bold">街口幣折抵 </view>
						<view class="hui_text main_size bold">${{orderInfo.StoreRedeemAmount}}</view>
					</view>
				</template>
				<template v-if="orderInfo.paytype==5 || orderInfo.paytype==8">
					<view class="flexbetween margin_top">
						<view class="hei_text main_size bold">LINE POINTS折抵 </view>
						<view class="hui_text main_size bold">${{orderInfo.RedeemAmount}}</view>
					</view>
					<view class="flexbetween margin_top">
						<view class="hei_text main_size bold">LINE 優惠券折抵  </view>
						<view class="hui_text main_size bold">${{orderInfo.StoreRedeemAmount}}</view>
					</view>
				</template> -->
			</view>
			<view class="shanghuax margin_top1"></view>
			<view class="flexbetween margin_top1">
				<view class="hei_text main_size bold">總金額</view>
				<view class="text_a color_six">${{orderInfo.count_money}}</view>
			</view>
			<view class="flexbetween margin_top1">
				<view class="hei_text main_size bold">已收金額</view>
				<view class="text_a color_six">${{orderInfo.pay_price}}</view>
			</view>
			<view class="flexbetween margin_top1">
				<view class="hei_text main_size bold">未收金額</view>
				<view class="text_x color_red">${{Number(orderInfo.count_money) - Number(orderInfo.pay_price)}}</view>
			</view>
			<view class="flexbetween margin_top1">
				<view class="hei_text main_size bold">訂單編號</view>
				<view class="text_a color_six">{{orderInfo.order_sn}}</view>
			</view>
			<view class="flexbetween margin_top1">
				<view class="hei_text main_size bold">下單時間</view>
				<view class="text_a color_six">{{http.timereturn(orderInfo.createtime*1000)}}</view>
			</view>
			<view class="flexbetween margin_top1" v-if="orderInfo.ordernotes">
				<view class="text_a">備注</view>
				<view class="text_a color_six">{{orderInfo.ordernotes}}</view>
			</view>
		</view>
		<view class="mainpadding_top ffffff radius" v-if="orderInfo.opentype!==-1 && orderInfo.fpinfo!=null"
			@click="gofpDetail(orderInfo.fpinfo)">
			<view class="flexbetween">
				<view class="titletext hei_text bold">發票信息</view>
				<text class="weikai" v-if="orderInfo.fpinfo && orderInfo.fpinfo.is_ly==1">未列印</text>
				<text class="yikai" v-if="orderInfo.fpinfo && orderInfo.fpinfo.is_ly==2">已列印</text>
			</view>
			<view class="flexbetween bold margin_top">
				<view class="flexleft">
					<view class="xiaolan bold main_size lanlable" v-if="orderInfo.opentype==0">紙本</view>
					<view class="xiaolan bold main_size lanlable" v-if="orderInfo.opentype==1">載具</view>
					<view class="xiaolan bold main_size lanlable" v-if="orderInfo.opentype==2">統編</view>
					<view class="xiaolan bold main_size lanlable" v-if="orderInfo.opentype==3">捐贈</view>
					<view v-if="orderInfo.tbcode"
						class="bold xiaolan margin_left1 ershib">{{orderInfo.tbcode}}</view>
				</view>
				<view class="flexright"  v-if="orderInfo.fpinfo && orderInfo.fpinfo.invoice_number">
					<view class="bold main_size margin_right1" :class="orderInfo.fpinfo.status==3?'xiaohong':'xiaolan'">
						發票號碼：{{orderInfo.fpinfo.invoice_number}}</view>
					<view class="xiaohong bold main_size" v-if="orderInfo.fpinfo.status==3">作廢</view>
				</view>
			</view>
			<view class="flexbetween bold margin_top" v-if="orderInfo.opentype==2">
				<view class="xiaolan bold main_size" v-if="orderInfo.tbmc">發票抬頭 </view>
				<view class="xiaolan bold main_size" v-if="orderInfo.tbmc">{{orderInfo.tbmc}}</view>
			</view>
		</view>
		<view class="mainpadding_top ffffff radius" v-if="orderInfo.status==87 || orderInfo.status==4">
			<view class="hei_text main_size bold">收款協定</view>
			<view class="flexbetween margin_top1" v-if="orderInfo.status==87">
				<view class="hei_text main_size bold">訂金</view>
				<view class="huang_text main_size bold">${{orderInfo.d_money || 0}}</view>
			</view>
			<view class="flexbetween margin_top1" v-if="orderInfo.status==87 || orderInfo.status==4">
				<view class="hei_text main_size bold">尾款</view>
				<view class="huang_text main_size">${{orderInfo.w_money || 0}}</view>
			</view>
		</view>
		<template v-if="orderInfo.is_ping">
			<view class="margin_top border2 ffffff mainpadding">
				<view class="flexleft">
					<view class="text_x color_ling margin_right1">店鋪評價</view>
					<u-rate active-color="#FAB536" inactive-color="#b2b2b2" readonly  v-model="pjall.shop_pf" :minCount="1" size="25"></u-rate>
				</view>
				<view class="text_five margin_top">{{pjall.shop_txt}}</view>
				<view class="flexleft flex_wrap">
					<view class="item_image_box margin_top" v-for="(item,index) in pjall.images_text" :key="index">
						<view class="item_image radius">
							<image :src="item" mode="" @click="lbtpriview(index,pjall.images_text)"></image>
						</view>
					</view>
				</view>
			</view>
		</template>
		<!-- 底部按钮 -->
		<view class="footer flexright">
			<view class="greyBtn" v-show="orderInfo.status==0 || orderInfo.status==87" @click.stop="cancelOrder(orderInfo.id)">取消訂單</view>
			<view class="orangeBtn margin_left3" v-show="orderInfo.status==0">打電話</view>
			<view class="orangeBtn margin_left3" v-show="orderInfo.status==87" @click.stop="Paydj(orderInfo)">立即付款</view>
			<view class="orangeBtn margin_left3" v-show="orderInfo.status==4" @click.stop="Paywk(orderInfo)">立即付款</view>
			<!-- <view class="greyBtn margin_right3" v-show="orderInfo.status==99 || orderInfo.status==88" @click.stop="removeOrder(orderInfo.id)">刪除訂單
			</view> -->
			<!-- <view class="orangeBtn margin_right3" v-show="orderInfo.status==99">查看發票</view> -->
			<view class="orangeBtn" v-show="orderInfo.status==99 && orderInfo.is_ping==0" @click.stop="goPublishEvaluate(orderInfo,3)">去評價</view>
		</view>
		<!-- 步骤条 -->
		<u-popup :show="show" mode="center" round="24" @close="show=false">
			<view class="popupBox">
				<u-steps current="3" dot direction="column" activeColor="#FFB800">
					<u-steps-item title="訂單提交成功" desc="06-29 15:36"></u-steps-item>
					<u-steps-item title="已出库" desc="06-29 15:36"></u-steps-item>
					<u-steps-item title="运输中" desc="06-29 15:36"></u-steps-item>
					<u-steps-item title="运输中" desc="06-29 15:36"></u-steps-item>
				</u-steps>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				orderInfo:{},
				pageShow:false,
				pjall:{}
			}
		},
		onLoad(options) {
			this.id = options.id

		},
		onShow() {
			this.getInfo()
		},
		methods: {
			gofpDetail(fpInfo) {
				if (fpInfo.id) {
					uni.navigateTo({
						url: "/pages_mine/invoiceDetail?id=" + fpInfo.id
					})
				}
			},
			goShopInfo(id) {
				uni.navigateTo({
					url: "/pages_index/shopInfo?id=" + id
				})
			},
			cancelOrder() { //取消訂單
				this.text = "您確定要取消此訂單吗？"
				this.orderType = 0
				this.showConfirm = true
			},
			removeOrder() { //刪除訂單
				this.text = "您確定要取消此訂單吗？"
				this.orderType = 0
				this.showConfirm = true
			},
			Paydj(item) { //付定金
				uni.navigateTo({
					url: "/pages_index/payment?msg=" + encodeURIComponent(JSON.stringify({
						id: item.id,
						paymoney: item.d_money,
						order_type:3,
						shop_id:item.shop_id,
						call_no:item.call_no
					}))
				})
			},
			Paywk(item) { //付尾款
				uni.navigateTo({
					url: "/pages_index/payment?msg=" + encodeURIComponent(JSON.stringify({
						id: item.id,
						paymoney: item.w_money,
						order_type:2,
						shop_id:item.shop_id,
						call_no:item.call_no
					}))
				})
			},
			goPublishEvaluate(item,val) { //發表評價
				let data = {
					type:val,//val：1商品訂單，2跑腿訂單，3呼叫訂單，4預約訂單，5票券
					qs_ishow:false,
					id:item.id
				}
				if(val==1){//商品訂單
					// type 0外送，1自取，2内用
					// 判断他的狀態是否外送并且是否有騎手，有展示騎手評價否则不显示騎手評價
					if((item.type==0 && item.ps_type==1) || (item.type==0 && item.ps_type==2)){
						data.qs_ishow = true
					}else{
						data.qs_ishow = false
					}
				}
				
				uni.navigateTo({
					url: "/pages_order/publishEvaluate?msg="+encodeURIComponent(JSON.stringify(data))
				})
			},
			async orderConfirm() { //確認 取消訂單/刪除訂單
				let url = "",
					text = "";
				if (this.orderType == 0) {
					url = "/api/Ordercall/endOrdercall"
					text = "取消成功"
				}
				if (this.orderType == 1) {
					url = "/api/ordercall/delOrdermake"
					text = "刪除成功"
				}
				let _this = this
				let res = await this.http.request(url, 'POST', {
					id: this.orderInfo.id
				})
				if (res.code == 1) {
					this.http.toast(text)
					this.showConfirm=false
					setTimeout(()=>{
						uni.navigateBack(1)
					},500)
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			async getInfo() { //訂單詳情
				let _this = this
				let res = await this.http.request('/api/ordercall/deailOrdermake', 'POST', {
					id: this.id,
				})
				if (res.code == 1) {
					if (res.data.is_ping) {
						this.getpjdetail()
					}
					res.data.goods_data.forEach(value => {
						value.logoimage = this.imgUrl + value.logoimage
					})
					if (res.data.pzqh_image) {
						let pzqh_image_text1 = res.data.pzqh_image.split(",")
						let pzqh_image_text = []
						if (pzqh_image_text1.length) {
							pzqh_image_text1.forEach(item => {
								let text = this.imgUrl + item
								pzqh_image_text.push(text)
							})
							this.$set(res.data, "pzqh_image_text", pzqh_image_text)
							console.log(res.data);
						}
					}

					if (res.data.pzsd_image) {
						let pzsd_image_text1 = res.data.pzsd_image.split(",")
						let pzsd_image_text = []
						if (pzsd_image_text1.length) {
							pzsd_image_text1.forEach(item => {
								let text = this.imgUrl + item
								pzsd_image_text.push(text)
							})
							this.$set(res.data, "pzsd_image_text", pzsd_image_text)
						}
					}
					this.orderInfo = res.data
					this.pageShow = true
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			async getpjdetail(){
				let _this = this
				let res = await this.http.request('/api/shop/evaluatedeail', 'POST', {
					id: this.id,
					type:2
				})
				if (res.code == 1) {
					let arr = JSON.parse(JSON.stringify(res.data.images.split(",")))
					let arr2 = []
					arr.forEach(item=>{
						arr2.push(this.imgUrl + item)
					})
					this.$set(res.data,"images_text",arr2)
					console.log(res.data.images_text,"999");
					this.pjall = res.data
				}
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕獲錯误{makePhoneCall:fail cancel}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 150rpx;
	}

	.shopImg {
		width: 26.62rpx;
		height: 24rpx;
		min-width: 26.62rpx;
	}

	.contactShop {
		min-width: 132rpx;
		width: 132rpx;
		height: 51rpx;
		line-height: 51rpx;
		text-align: center;
		background: rgba(255, 196, 0, 0.1);
		border-radius: 9rpx 9rpx 9rpx 9rpx;
		border: 1rpx solid #FFB800;
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.goodsImg {
		width: 157rpx;
		height: 157rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			border-radius: 14rpx;
		}

		.shipment {
			// width: 71rpx;
			// height: 30rpx;
			// line-height: 30rpx;
			padding: 4rpx;
			box-sizing: border-box;
			text-align: center;
			background: #13C463;
			border-radius: 14rpx 0rpx 14rpx 0rpx;
			font-size: 18rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			position: absolute;
			left: 0;
			top: 0;
		}
	}

	.price {
		font-size: 30rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #FF5C00;
	}

	.greyBtn {
		padding:10rpx 30rpx;
		text-align: center;
		border: 2rpx solid rgba(102, 102, 102, 1);
		border-radius: 120rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.orangeBtn {
		padding:10rpx 30rpx;
		text-align: center;
		border: 2rpx solid rgba(255, 92, 0, 1);
		border-radius: 120rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF5C00;
	}

	.popupBox {
		width: 660rpx;
		padding: 50rpx 50rpx 0;
		box-sizing: border-box;
	}

	::v-deep.u-steps-item__content {
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 50rpx;
		flex: 1;
	}

	::v-deep.u-text:nth-child(2) {
		justify-content: flex-end !important;
	}
</style>